    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meteocal</title>
<link href="../css/modify_account.css" rel="stylesheet" type="text/css" />
</h:head>

    <h:body style="background-color:#81a4c7" onload="#{modificationBean.initialize()}">
    <div id="wrap">
    	<div id="header">
            <a href="user_home3.xhtml"><img src="./../images/Logo.png" style="width:150px; height:150px;" /></a>
            <div style="float:right;">
                <div>
                    <p:commandButton value="Log out" style="width: 100px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: right; margin-left: 20px; margin-top: 10px; background: #6cb364; color: white; font-family: Comic Sans MS;" 
                                             action="#{loginBean.logout()}" />
                    <h:form style="float: left"><p:commandLink action="#{loginBean.logout()}"></p:commandLink></h:form>
                </div>
                <div style="float:right; ">
                </div>
            </div>
        </div>
        <div id="central">
            <div id="image_div">
                <h2 style="padding-top: 20px;">Your profile image (.png file)</h2>
                <h:form id="imageForm" >
                    <p:graphicImage id="avatarImg" value="#{modificationBean.userAvatar}" cache="false" style="width:250px; height:250px;"/>
                    <p:fileUpload  fileUploadListener="#{modificationBean.uploadListener}" mode="advanced" dragDropSupport="false"
                                  update="imageForm" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" styleClass="fileUploadClass" style="font-size: 18px; margin-left: 20px; margin-right: auto;" />
                </h:form>
                
            </div> 
            <div id="profile_area">
                <div id="profile_container">
                    <div id="profile_header">
                        <h1>Your profile information</h1>
                    </div>
                    <h:form id="updateform" style="font-family: Comic Sans MS; color: #ffffff; font-size: 20px">
                        <h:panelGrid columns="1" id="upGrid">
                            <h:outputLabel style="margin-left: 20px;" for="name">Name:</h:outputLabel>
                            <p:inputText id="name" value="#{modificationBean.user.name}" placeholder="#{modificationBean.currentUser.name}"
                                         style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                <p:ajax update="namemsg"/>
                            </p:inputText>
                            <p:message id="namemsg" for="name" />

                            <h:outputLabel style="margin-left: 20px;" for="surname">Surname:</h:outputLabel>
                            <p:inputText id="surname" value="#{modificationBean.user.surname}" placeholder="#{modificationBean.currentUser.surname}"
                                         style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                <p:ajax update="surname"/>
                            </p:inputText>
                            <p:message id="surnamemsg" for="surname" />

                            <h:outputLabel style="margin-left: 20px;" for="phone">Phone:</h:outputLabel>
                            <p:inputText id="phone" value="#{modificationBean.user.phone}" placeholder="#{modificationBean.currentUser.phone}"
                                         style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                <p:ajax update="phone"/>
                            </p:inputText>
                            <p:message id="phonemsg" for="phone" />

                            <h:outputLabel style="margin-left: 20px;" for="password">Password:</h:outputLabel>
                            <p:password id="password" value="#{modificationBean.user.password}" 
                                        feedback="true" match="pwd2" label="Password"
                                        style="width:360px; float:left; margin-right: 10px; margin-left: 20px;"/>
                            <p:message for="password" />

                            <h:outputLabel style="margin-left: 20px;" for="pwd2">Confirm Password:</h:outputLabel>
                            <p:password id="pwd2" label="Confirm Password"
                                        style="width:360px; float:left; margin-right: 10px; margin-left: 20px;"/>
                            <br />
                            <p:outputLabel style="margin-left: 20px;" for="privacy" value="Calendar privacy:" />
                            <p:selectOneRadio id="privacy" value="#{modificationBean.user.privacy}"
                                              style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                <f:selectItem itemLabel="Private" itemValue="#{true}" />
                                <f:selectItem itemLabel="Public" itemValue="#{false}" />
                            </p:selectOneRadio>
                            <p:commandButton id="submit" value="Update" update="upGrid" action="#{modificationBean.update()}" 
                                         style="width: 370px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: left; margin-left: 20px; background: #6cb364; color: white; font-family: Comic Sans MS;"/>
                            <br />
                        </h:panelGrid>
                    </h:form>
                </div>
            </div>
        </div>
        <div id="footer">
            <p>Software engineering 2</p>
            Project 2014-2015<br />
            Rimoldi_Lattari<br />
            <p></p>
        </div>
    </div>
</h:body>
</html>
